<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线留言</title>
    <script src="../js/message.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <style>
        body {
            width: 960px;
            margin: 0px auto;
            background: url(../img/bj.jpg) #F4F9FF no-repeat center top;
        }
        h2 {
            font-size: 24px;
            font-weight: bold;
            text-align: left;
            padding-left: 5px;
        }

        #s1 header {
            margin: 20px 0;
            height: 25px;
        }

        #form1 {
            margin: 0px;
            padding: 0px;
            height: 225px;
        }

        #form1 #nickName {
            width:480px;
            border: 1px solid darkseagreen;
        }

        #form1 #theMessage {
            width:480px;
            height: 140px;
        }
        /* ---------------------------------------------------------------------------------------*/
        div#infoTable{
            overflow: auto;
            width: 100%;
            height: 100%;
        }
        div#infoTable table{
            width: 100%;
            background-color: white;
            cellpadding:1;            /*单元格边距*/
            cellspacing:1;            /*单元格间距*/
            text-align: center;
        }
        div#infoTable table tr{
            height: 30px;
        }
        div#infoTable table tr:nth-child(odd){      /*table的奇数行*/
            background-color: #E6E6E6;
            color: #333333;
        }
        div#infoTable table tr:nth-child(even){    /*table的偶数行*/
            background-color: #FAFAFA;
            color: black;
        }
        div#infoTable table tr:nth-child(1){   /*table的第一行*/
            background-color: #7088AD;
            color: #FFFFFF;
        }
        #form1 td {
            font: 16px/1.4 宋体;
        }
        #infoTable td {
            font: 12px/1.4 宋体;
        }
    </style>
</head>
<body onload="window_onload()">
<section id="s1">
    <header>
        <p style="font-size: 30px; color: #00008B" >评价</p>
    </header>
    <form id="form1">
        <table>
            <tr>
                <td> 留言人昵称&nbsp;&nbsp;</td>
                <td><input type="text" id="nickName" placeholder="输入一个不存在的昵称" autofocus required></td>
            </tr>
            <tr>
                <td> 留言内容</td>
                <td><textarea  id="theMessage" ></textarea></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" id="btnClear" value="重&nbsp;&nbsp;置"
                           onclick="btnClear_onclick();"/>
                    <input type="submit" id="btnAdd" value="发布留言"
                           formaction="javascript:btnAdd_onclick();"/></td>
            </tr>
        </table>
    </form>
</section>
<hr>
<section id="s2">
    <header>
        <p style="font-size: 50px;color: #00008B">全部留言</p>
    </header>
    <div id="infoTable">
        <table id="datatable">
            <tr>
                <th style="width:120px">用户昵称</th>
                <th>内容</th>
                <th  style="width:180px">留言时间</th>
            </tr>
        </table>
    </div>
    <div>
        <form>
            <input type="submit" id="btnDelete" value="删除"
                   formaction="javascript:btnDelete_onclick();"/>
            <a href="menu.html"><input type="button" value="返回" ></a>
        </form>
    </div>
</section>
<button type="button" class="btn btn-default" style="margin-left: 70%;font-size: 50px; " ><a href="menu.html" style="text-decoration-line: none">返回菜单栏</a
</body>
</html>